<template>
	<view class="">
		<u-navbar :border-bottom="false" title-color="#333" title-bold title="新人指导" title-size="36"></u-navbar>
		<view class="tab-div">
			<view class="pro-div flex flex_wrap flex_sb">
				<view class="pro-item" v-for="(item,index) in xrlist" :key="index" @click="tidetail(item)">
					<view class="pro-img">
						<image class="pro-item-img" :src="item.thumb" mode="aspectFill"></image>
						<image v-if="item.video" src="../../../../static/img/home/bofang-icon.png" mode=""></image>
					</view>
					<view class="line_1 textitl u-m-t-12">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xrlist:[]
			}
		},
		onLoad() {
			this.xinrenzhidao()
		},
		methods: {
			xinrenzhidao(){
				this.$api({
					url: '/np_article',
					method: 'get',
				}).then(res => {
					if (res.code == 1) {
						this.xrlist = res.data
					}
				})
			},
			tidetail(e){
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/mine/xinrenzhidaoDetail?item="+JSON.stringify(e)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.linhe48 {
		line-height: 40rpx;
	}
	.del-icon{
		width: 40rpx;
		height: 40rpx;
	}
	.btn-bo{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0,0,0,0.14);
		padding-top: 14rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		
		.btn_login_btn{
			width: 686rpx;
			height: 90rpx;
			background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			// margin-top: 116rpx;
			font-size: 36rpx;
			color: #fff;
			line-height: 90rpx;
			margin-left: 32rpx;
			text-align: center;
			font-weight: bold;
		}
	}
	.gl-btn{
		width: 130rpx;
		height: 48rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid #605F6A;
		text-align: center;
		line-height: 48rpx;
	}
	.tab-div {
		width: 750rpx;
		// height: 672rpx;
		padding:0 32rpx;
		// background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
	}

	.pro-div{
		.pro-item{
			margin-top: 24rpx;
			
			
			
			
			.pro-img{
				position: relative;
				width: 332rpx;
				height: 440rpx;
				border-radius: 8rpx;
				
				.zhezhao{
					position: absolute;
					width: 332rpx;
					height: 440rpx;
					border-radius: 8rpx;
					top: 0;
					left: 0;
					background-color: rgba(0,0,0,0.5);
					.gl-i{
						width: 64rpx;
						height: 64rpx;
						background: #000000;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						.gl-icon{
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
				
				.pro-item-img{
					position: absolute;
					top: 0;
					left: 0;
					width: 332rpx;
					height: 440rpx;
					border-radius: 8rpx;
				}
				.pro-item-bf{
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.textitl{
				width: 332rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
			.headimg{
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
			}
		}
	}
</style>